<template>
  <div class="page">
    <au-panel class="section" title="基础用法">
      <!-- 组件示例 -->
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-input label="基础用法" colspan="8"></ep-input>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow1" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-input label="基础用法" colspan="8"></ep-input>
            </el-row>
          </el-form>
        </template>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow1 = !codeShow1">
        {{codeShow1 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="输入类型">
      <!-- 组件示例 -->
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-input label="默认类型" colspan="8"></ep-input>
            <ep-input label="大于1两位小数数字" inputtype="number" colspan="8"></ep-input>
            <ep-input label="正整数" inputtype="PositiveInteger" colspan="8"></ep-input>
            <ep-input label="0.00-1.00" inputtype="zerotoone" colspan="8"></ep-input>
            <ep-input label="0.000-1.000" inputtype="zerotoone1" colspan="8"></ep-input>
            <ep-input label="正2位小数数字" inputtype="zeronumber" colspan="8"></ep-input>
            <ep-input label="负8位到正9位两小数" inputtype="funumber" colspan="8"></ep-input>
            <ep-input label="正6位小数数字" inputtype="wannumber" colspan="8"></ep-input>
            <ep-input label="正4位小数数字" inputtype="fournumber" colspan="8"></ep-input>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow2" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-input label="默认类型" colspan="8"></ep-input>
              <ep-input label="大于1两位小数数字" inputtype="number" colspan="8"></ep-input>
              <ep-input label="正整数" inputtype="PositiveInteger" colspan="8"></ep-input>
              <ep-input label="0.00-1.00" inputtype="zerotoone" colspan="8"></ep-input>
              <ep-input label="0.000-1.000" inputtype="zerotoone1" colspan="8"></ep-input>
              <ep-input label="正2位小数数字" inputtype="zeronumber" colspan="8"></ep-input>
              <ep-input label="负8位到正9位两小数" inputtype="funumber" colspan="8"></ep-input>
              <ep-input label="正6位小数数字" inputtype="wannumber" colspan="8"></ep-input>
              <ep-input label="正4位小数数字" inputtype="fournumber" colspan="8"></ep-input>
            </el-row>
          </el-form>
        </template>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow2 = !codeShow2">
        {{codeShow2 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="默认值">
      <!-- 组件示例 -->
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-input label="默认值" value="我是默认值" colspan="8"></ep-input>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow3" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-input label="默认值" value="我是默认值" colspan="8"></ep-input>
            </el-row>
          </el-form>
        </template>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow3 = !codeShow3">
        {{codeShow3 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="金额">
      <!-- 组件示例 -->
      <p class="paragraph">
        输入框中的数字为金额
      </p>
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-input label="金额数" money colspan="8"></ep-input>
            <ep-input label="金额数补足小数" fuMoney colspan="8"></ep-input>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow4" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-input label="金额数" money colspan="8"></ep-input>
              <ep-input label="金额数补足小数" fuMoney colspan="8"></ep-input>
            </el-row>
          </el-form>
        </template>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow4 = !codeShow4">
        {{codeShow4 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="禁止输入">
      <!-- 组件示例 -->
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-input label="禁止输入" placeholder="禁止输入" eleDisabled colspan="8"></ep-input>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow5" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-input label="禁止输入" placeholder="禁止输入" eleDisabled colspan="8"></ep-input>
            </el-row>
          </el-form>
        </template>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow5 = !codeShow5">
        {{codeShow5 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="最大长度">
      <!-- 组件示例 -->
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-input label="最大长度为3" maxlength="3" colspan="8"></ep-input>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow6" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-input label="最大长度为3" maxlength="3" colspan="8"></ep-input>
            </el-row>
          </el-form>
        </template>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow6 = !codeShow6">
        {{codeShow6 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="搜索图标">
      <!-- 组件示例 -->
      <div class="component-example">
        <el-form>
          <el-row>
            <ep-input label="搜索图标" isClick colspan="8"></ep-input>
          </el-row>
        </el-form>
      </div>
      <code-h v-show="codeShow7" lang="html" content='
        <template>
          <el-form>
            <el-row>
              <ep-input label="搜索图标" isClick colspan="8"></ep-input>
            </el-row>
          </el-form>
        </template>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center;" @click="codeShow7 = !codeShow7">
        {{codeShow7 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="Props">
      <au-table>
        <thead>
          <tr>
            <th>字段</th>
            <th>必填</th>
            <th>类型</th>
            <th>默认</th>
            <th>可选</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>inputtype</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>text</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">number</li>
                <li class="au-theme-border-color--base-8">PositiveInteger</li>
                <li class="au-theme-border-color--base-8">zerotoone</li>
                <li class="au-theme-border-color--base-8">zerotoone1</li>
                <li class="au-theme-border-color--base-8">zeronumber</li>
                <li class="au-theme-border-color--base-8">funumber</li>
                <li class="au-theme-border-color--base-8">wannumber</li>
                <li class="au-theme-border-color--base-8">fournumber</li>
              </ol>
            </td>
            <td>
              输入数字的类型
            </td>
          </tr>
          <tr>
            <td>value</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>Number<br>
            -String</td>
            <td><au-icon type="minus"></au-icon></td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              输入框的默认值
            </td>
          </tr>
          <tr>
            <td>money</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>
              Boolean
            </td>
            <td>false</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>
              是否是金额输入框
            </td>
          </tr>
          <tr>
            <td>fuMoney</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>
              Boolean
            </td>
            <td>false</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>
              是否需要补足两位小数
            </td>
          </tr>
          <tr>
            <td>ishide</td>
            <td>
              <au-icon type="times"></au-icon>
            </td>
            <td>Boolean</td>
            <td>false</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>
              是否隐藏输入框
            </td>
          </tr>
          <tr>
            <td>colspan</td>
            <td>
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>24</td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              组件所占一行的份数，默认是24份全占
            </td>
          </tr>
          <tr>
            <td>labelWidth</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>140</td>
            <td>
              <au-icon type="minus"></au-icon>
            </td>
            <td>
              输入框标签文本长度
            </td>
          </tr>
          <tr>
            <td>label</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td><au-icon type="minus"></au-icon></td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              输入框标签文本
            </td>
          </tr>
          <tr>
            <td>placeholder</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>请输入</td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              输入框提示文本
            </td>
          </tr>
          <tr>
            <td>eleDisabled</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>Boolean</td>
            <td>false</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>
              是否禁止输入
            </td>
          </tr>
          <tr>
            <td>maxlength</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>Number<br>-String</td>
            <td><au-icon type="minus"></au-icon></td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              最大输入长度限制
            </td>
          </tr>
          <tr>
            <td>name</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td><au-icon type="minus"></au-icon></td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              form 表单中的 prop值
            </td>
          </tr>
          <tr>
            <td>isClick</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>Boolean</td>
            <td>false</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>
              输入框是否有图标
            </td>
          </tr>
        </tbody>
      </au-table>
    </au-panel>
    <au-panel class="section" title="Slots">
      <au-icon type="minus"></au-icon>
    </au-panel>
    <au-panel class="section" title="Events">
      <au-table>
        <thead>
          <tr>
            <th>名称</th>
            <th>参数</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>@isClick</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">name</li>
                <li class="au-theme-border-color--base-8">value</li>
              </ol>
            </td>
            <td>
              点击图标
              参数name表示传入name值<br>
              参数value表示输入值
            </td>
          </tr>
          <tr>
            <td>@calculate-condition-changes</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">value</li>
                <li class="au-theme-border-color--base-8">name</li>
                <li class="au-theme-border-color--base-8">indexNum</li>
              </ol>
            </td>
            <td>
              值改变事件<br>
              参数value表示当前值<br>
              参数name表示传入name值<br>
              参数indexNum没啥用
            </td>
          </tr>
          <tr>
            <td>@input-message</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">value</li>
                <li class="au-theme-border-color--base-8">name</li>
                <li class="au-theme-border-color--base-8">indexNum</li>
              </ol>
            </td>
            <td>
              失焦事件<br>
              参数value表示当前值<br>
              参数name表示传入name值<br>
              参数indexNum没啥用
            </td>
          </tr>
          <tr>
            <td>@input-onFocus</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">name</li>
              </ol>
            </td>
            <td>
              聚焦事件<br>
              参数name表示传入name值
            </td>
          </tr>
          <tr>
            <td>@input-onEnter</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">value</li>
                <li class="au-theme-border-color--base-8">name</li>
                <li class="au-theme-border-color--base-8">indexNum</li>
              </ol>
            </td>
            <td>
              回车事件<br>
              参数value表示当前值<br>
              参数name表示传入name值<br>
              参数indexNum没啥用
            </td>
          </tr>
        </tbody>
      </au-table>
      <!-- <au-icon type="minus"></au-icon> -->
    </au-panel>
  </div>
</template>
<script>
export default {
  name: 'input-examples',
  data () {
    return {
      codeShow1: false,
      codeShow2: false,
      codeShow3: false,
      codeShow4: false,
      codeShow5: false,
      codeShow6: false,
      codeShow7: false,
      codeShow8: false,
      codeShow9: false,
      codeShow10: false,
      codeShow11: false,
      codeShow12: false,
      codeShow13: false,
      codeShow14: false,
      codeShow15: false,
      value: '',
      type: 'textarea',
      validators: [
        {
          validator (v) {
            return v === '我爱你'
          },
          warning: '快说你爱我！快说你爱我！快说你爱我！快说你爱我！快说你爱我！快说你爱我！快说你爱我！'
        }
      ],
      tips: [
        '我是第一条提示',
        '风骚的第二条提示'
      ],
      associations: [
        '第1条关联',
        '第2条关联',
        '第3条关联'
      ]
    }
  },
  methods: {
    handleAssociationSelect (v) {
      console.log(v)
    }
  }
}
</script>
